<template>
  <div class="header">
    <div class="area header_wrapper">
      <div class="left-area">
        <h1 class="logo">
          <a href="#">王者荣耀</a>
        </h1>
        <ul class="nav-list">
          <li class="item active">
            <a href="#">
              游戏资料
              <span class="desc">DATA</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              内容中心
              <span class="desc">CONTENTS</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              赛事中心
              <span class="desc">MATCH</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              百态王者
              <span class="desc">CULTURE</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              社区互动
              <span class="desc">COMMUNITY</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              玩家支持
              <span class="desc">PLAYER</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              IP新游
              <span class="desc">NEW GAMES</span>
            </a>
          </li>
        </ul>
        <div class="search">
          <a href="#"></a>
        </div>
      </div>
      <div class="right-area">
        <a class="image" href="#">
          <img src="../../assets/header_login.png" alt="">
        </a>
        <div class="info">
          <a href="#">欢迎登录</a>
          <p>登录后查看游戏战绩</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HonorHeader',
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>
